import { defineStore } from 'pinia';

import store from '@/store';
import designSetting from '@/setting/app-setting';

const { darkTheme, darkSide, darkTop, appTheme, borderRadius } = designSetting;

interface DesignSettingState {
  // 深色主题
  darkTheme: boolean;
  // 深色侧边栏
  darkSide: boolean;
  // 深色顶栏
  darkTop: boolean;
  // 内置主题
  appTheme: string;
  // 内置主题
  borderRadius: string;
}

export const useAppearanceSettingStore = defineStore({
  id: 'appearance-setting',
  state: (): DesignSettingState => ({
    darkTheme,
    darkSide,
    darkTop,
    appTheme,
    borderRadius,
  }),
  getters: {
    getDarkTheme(): boolean {
      return this.darkTheme;
    },
    getDarkSide(): boolean {
      return this.darkSide;
    },
    getDarkTop(): boolean {
      return this.darkTop;
    },
    getAppTheme(): string {
      return this.appTheme;
    },
    getBorderRadius(): string {
      return this.borderRadius;
    },
  },
  actions: {
    setDarkTheme(darkTheme: boolean) {
      if (darkTheme) {
        this.darkSide = false;
        this.darkTop = false;
      }
      this.darkTheme = darkTheme;
    },
    setDarkSide(darkSide: boolean) {
      this.darkSide = darkSide;
    },
    setDarkTop(darkTop: boolean) {
      this.darkTop = darkTop;
    },
    setAppTheme(appTheme: string) {
      this.appTheme = appTheme;
    },
    setBorderRadius(borderRadius: string) {
      this.borderRadius = borderRadius;
    },
  },
});

export function useAppearanceSetting() {
  return useAppearanceSettingStore(store);
}
